<template>
    <view>
        <!-- 猫头鹰头像区域 -->
        <view class="login-img">
            <view class="owl-login" :class="hideEyes?'password':''">
                <view class="hand"></view>
                <view class="hand hand-r"></view>
                <view class="arms">
                    <view class="arm"></view>
                    <view class="arm arm-r"></view>
                </view>
            </view>
        </view>
        <!-- 注册表单输入区域 -->
        <view class="login-form">
            <u-form>
                <view class="title" style="text-align: center;">
                    <text>注册</text>
                </view>
                <u-form-item :border-bottom=false>
                    <u-input v-model="username" type="username" placeholder=" 账号" style="background-color:white;" />
                </u-form-item>
                <u-form-item :border-bottom=false>
                    <u-input v-model="password" @focus="passwordF_B" @blur="passwordF_B" type="password"
                        placeholder=" 密码" style="background-color:white;" />
                </u-form-item>
                <u-form-item :border-bottom=false>
                    <u-input v-model="password_recheck" type="password" placeholder="再次确认密码" @focus="passwordF_B"
                        @blur="passwordF_B" style="background-color:white;" />
                </u-form-item>
                <u-form-item :border-bottom=false>
                    <u-input v-model="email" type="text" placeholder="请输入邮箱" @focus="passwordF_B" @blur="passwordF_B"
                        style="background-color:white;" />
                </u-form-item>

                <view class="login_register">
                    <button type="primary" :rotate="isRotate" class="btn_login" shape="square"
                        @click.native="startReg()">确定注册</button>
                </view>
            </u-form>
        </view>
    </view>
</template>

<script>
    var _this;
    import setting from '@/api/baseUrl.js'
    import userApi from '@/api/user/index.js'
    import utils from '@/common/utils.js'
    export default {
        data() {
            return {
                hideEyes: false,
                show: false,
                isRotate: false, //是否加载旋转
                username: '', //用户名
                password: '', //密码
                password_recheck: '', //再次确认密码
                email: ''
            }
        },

        mounted() {
            _this = this;
        },
        methods: {
            passwordF_B() {
                this.hideEyes = !this.hideEyes;
            },
            startReg() {
                //注册
                if (this.isRotate) {
                    //判断是否加载中，避免重复点击请求
                    return false;
                }
                if (this.username.length < 2) {
                    uni.showToast({
                        icon: 'none',
                        position: 'bottom',
                        title: '用户名长度2~12'
                    });
                    return false;
                }
                if (this.password.length < 6 && this.password.length > 12) {
                    uni.showToast({
                        icon: 'none',
                        position: 'bottom',
                        title: '密码不正确，长度6~12'
                    });
                    return false;
                }
                if (this.password_recheck.length < 6) {
                    uni.showToast({
                        icon: 'none',
                        position: 'bottom',
                        title: '再次输入不正确'
                    });
                    return false;
                }
                if ((this.password.length >= 6 && this.password <= 12) && this.password !== this.password_recheck) {
                    uni.showToast({
                        icon: 'none',
                        position: 'bottom',
                        title: '密码不一致'
                    });
                    return false;
                }

                if (!utils.checkEmail(this.email) || this.email.length !== 16) {
                    uni.showToast({
                        title: '邮箱格式错误',
                        icon: 'none'
                    });
                    return false;
                } else {
                    _this.isRotate = true
                    var obj = {
                        "password": this.password,
                        "username": this.username,
                        "email": this.email,
                    }
                    userApi.registerAddEmail(obj).then(res => {
                        if (res.success == true) {
                            uni.showToast({
                                title: '注册成功!'
                            })
                            setTimeout(() => {
                                uni.redirectTo({
                                    url: '/pages/user/login/login'
                                })
                            }, 1000)
                        }
                        _this.isRotate = false
                    }).catch(err => {
                        //consolelelelele.log(err);
                    })
                }
            },
        }
    }
</script>

<style lang="scss" scoped>
    @import url("../../../static/css/owl_login.css");
    @import url("../../../static/css/register_form.css");
</style>
